<template>
  <div>
    <div class="zt">
      <div class="centainer">
        <div class="compass1">
          <div class="floor1">
            <h3>婚庆筹备指南</h3>

            <div class="right">
              <a href="">婚礼布置</a>
              <a href="">现场歌曲</a>
              <a href="">婚礼致辞</a>
              <a href="">誓言</a>
              <a href="">方案流程</a>
              <router-link to="/compass_more">更多></router-link>
            </div>
          </div>
          <div class="floor2">
            <div class="main" v-if="data">
              <ul
                v-for="{ we_id, picture, read, title, we_date } in data"
                :key="we_id"
              >
                <li @click="goto(we_id)">
                  <img :src="picture" alt="" />
                  <a href="">{{ title }}</a>
                  <p>
                    <span>{{ we_date }}</span>
                    <span>阅读{{ read }}</span>
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="compass2">
          <div class="conter">
            <div class="top">
              <span>婚庆效果图</span>
              <a href="">更多></a>
            </div>
            <div class="floor" v-if="data1">
              <div
                class="main"
                v-for="{
                  xgt_id,
                  xgt_title,
                  xgt_img,
                  xgt_sydz,
                  xgt_sc,
                } in data1"
                :key="xgt_id"
              >
                <img :src="`/effect/${xgt_img}`" alt="" />
                <h3>{{ xgt_title }}</h3>
                <div>
                  <p>{{ xgt_sydz }}</p>
                  <p>收藏:{{ xgt_sc }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      data1: "",
    };
  },
  mounted() {
    const url = `/comRouter/compass`;
    this.axios.get(url).then(res => {
      console.log(res);
      this.data = res.data;
    });
    const url1 = `/effect/eff`;
    this.axios.get(url1).then(res => {
      console.log(res);
      this.data1 = res.data;
    });
  },

  methods: {
    goto(id) {
      this.$router.push({
        path: "/compass_detail",
        query: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.zt {
  margin: 0 auto;
  width: 1230px;
  .centainer {
    user-select: no;
    display: flex;
    justify-content: space-between;
    padding-bottom: 25px;
    .compass1 {
      width: 600px;
      height: 360px;
      background-color: #fff;
    }
  }
  .compass2 {
    background-color: #fff;
    user-select: none;
    .conter {
      box-sizing: border-box;
      width: 600px;
      .top {
        display: flex;
        justify-content: space-between;

        span {
          margin: 10px 0 0 15px;
          font-size: 25px;
          font-weight: bold;
        }
        a {
          font-size: 15px;
          margin: 15px 35px 0 0;
          color: #696669;
        }
        a:hover {
          color: red;
        }
      }
      .floor {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        img {
          width: 175px;
          cursor: pointer;
        }
        img:hover {
          opacity: 0.8;
        }
        .main {
          margin-top: 15px;
          h3 {
            font-size: 12px;
            font-weight: 500;
            width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
          }
          h3:hover {
            color: red;
          }
          div {
            width: 160px;
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            color: #696669;
            // padding-top: 8px;

            p:first-child {
              width: 100px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
  .floor1 {
    display: flex;
    h3 {
      font-size: 25px;
      padding: 10px 0 0 12px;
    }
    .right {
      display: flex;
      align-items: center;
    }
    a {
      font-size: 12px;
      background-color: #f5f5f5;
      color: #696669;
      padding: 3px 5px;
      margin-left: 12px;
      border-radius: 3px;
    }
    a:hover {
      color: red;
    }
    a:last-child {
      font-size: 14px;
      margin-left: 30px;
    }
    a:last-child {
      background-color: #fff;
    }
  }
  .floor2 {
    .main {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    ul {
      padding: 10px 0;
      li {
        width: 170px;
        display: flex;
        flex-direction: column;
        img {
          cursor: pointer;
        }
        img:hover {
          opacity: 0.8;
        }
        a {
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #000;
        }
        p {
          display: flex;
        }
        a:hover {
          color: red;
        }
        span {
          color: #666666;
          font-size: 12px;
        }
        span:last-child {
          padding-left: 40px;
        }
      }
    }
  }
}
</style>
